<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的商品列表</title>
    <script src="../../static/js/axios-0.18.0.js"></script>
    <script src="../../static/plugins/echarts/echarts.js"></script>
    <script src="../../static/js/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
        }
        .avatar {
            width: 80px;
            height: 80px;
            display: block;
        }
    </style>
</head>
<body class="hold-transition">
<div id="app">
    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <el-input @keyup.enter.native="findPage()" placeholder="商品名称" v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>
                <el-button @click="findPage()" class="dalfBut">查询</el-button>
                <template>
                    <h4 class="el-icon-help">选择状态</h4>
                    <el-select placeholder="全部商品" v-model="findstatus" @change="findPage()">
                        <el-option key="1" label="全部商品" value=""></el-option>
                        <el-option key="2" label="待审核" value="3"></el-option>
                        <el-option key="3" label="正常" value="1"></el-option>
                        <el-option key="4" label="违规" value="0"></el-option>
                        <el-option key="5" label="已售出" value="4"></el-option>
                        <el-option key="6" label="已删除" value="2"></el-option>
                    </el-select>
                </template>
            </div>
            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                <el-table-column type="index" align="center" label="序号"></el-table-column>
                <el-table-column prop="commname" label="名称" align="center"></el-table-column>
                <el-table-column prop="category" label="类别" align="center"></el-table-column>
                <el-table-column prop="commdesc" label="描述" align="center">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="light" :content="scope.row.commdesc" placement="top-start" style="width: 400px">
                            <span>{{scope.row.commdesc.substring(0,16)}}...</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="createtime" label="时间" align="center"></el-table-column>
                <el-table-column label="操作"  align="center" width="300px">
                    <template slot-scope="scope">
                        <el-button-group>
                            <el-button type="primary" size="mini" @click="xiangqing(scope.row)">详情</el-button>
                            <el-button v-if="scope.row.commstatus === 1" type="success" size="mini" @click="solded(scope.row)">已售出</el-button>
                            <el-button v-if="scope.row.commstatus !== 4 && scope.row.commstatus !== 2" type="warning" size="mini" @click="editcomm(scope.row)">编辑</el-button>
                            <el-button v-if="scope.row.commstatus === 2" type="info" size="mini">已删除</el-button>
                            <el-button v-else type="danger" size="mini" @click="deletecomm(scope.row)">删除</el-button>
                            <el-button v-if="scope.row.commstatus === 0" type="info" size="mini">违规商品</el-button>

                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </div>
    </div>
    <!-- 编辑标签弹层 -->
    <div class="add-form">
        <el-dialog title="编辑公告" :visible.sync="dialogFormVisible4Edit">
            <el-form ref="dataEditForm" :model="editData" :rules="rules" label-position="right" label-width="100px">
                <el-row>
                    <el-form-item label="商品名" prop="commname">
                        <el-input
                                type="text"
                                placeholder="请输入商品名"
                                v-model="editData.commname"
                                maxlength="20"
                                show-word-limit
                        >
                        </el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="商品简介" prop="commdesc">
                        <el-input
                                type="textarea"
                                placeholder="请输入内容,出售原因......."
                                :autosize="{minRows:5,maxRows:10}"
                                v-model="editData.commdesc"
                                maxlength="50"
                                show-word-limit
                        >
                        </el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="商品原价" prop="orimoney">
                        <el-input type="number"
                                  placeholder="请输入原价"
                                  v-model="editData.orimoney"
                                  show-word-limit
                        >
                        </el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="商品现价" prop="thinkmoney">
                        <el-input type="number"
                                  placeholder="请输入现价"
                                  v-model="editData.thinkmoney"
                                  show-word-limit
                        >
                        </el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="商品类别" prop="category">
                        <el-select v-model="editData.category" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="商品属性" prop="common">
                        <!--2个单选框-->
                        <el-radio v-model="editData.common" label="可快递" border size="medium">可快递</el-radio>
                        <el-radio v-model="editData.common" label="只自提" border size="medium">只自提</el-radio>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="上传主图" prop="image">
                        <el-upload
                                class="avatar-uploader"
                                action="/commodity/upload"
                                :auto-upload="autoUpload"
                                name="image"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-picture-outline avatar-uploader-icon"></i>
                            <div slot="tip" class="el-upload__tip">只能上传jpg或png文件，且不超过2048kb</div>
                        </el-upload>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item  label="详情图" prop="imagelist">
                        <el-upload
                                class="upload-demo"
                                action="/commodity/imagelist"
                                :limit="maxUpload"
                                :before-upload="handlePreview"
                                :auto-upload="autoUpload"
                                :on-remove="handleRemove"
                                :on-success="handleListSuccess"
                                :file-list="fileList"
                                :on-exceed="exceed"
                                :multiple="autoUpload"
                                name="file"
                                list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb,最多3张图片</div>
                        </el-upload>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                    <el-button type="primary" @click="handleEdit()">确定</el-button>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data:{
            dialogFormVisible4Edit:false,
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:10,//每页显示的记录数
                total:0,//总记录数
                queryString:null//查询条件
            },
            findstatus: '',//0违规，1正常，2删除过的，3待审核，4已售出
            dataList: [],//当前页要展示的分页列表数据
            oneData:{},//行数据
            editData:{},//编辑框数据
            autoUpload:true,
            imageUrl:null,
            maxUpload:3,
            fileList:[],
            imageList:'',
            rules: {
                commname:[{required:true,message:'标题为必填项',trigger:'blur'},
                    {min:3,max:20,message:'标题长度在3-20个字符',trigger:'blur'}],
                commdesc:[{required:true,message:'商品简介为必填项',trigger:'blur'}],
                thinkmoney:[{required:true,message:'商品现价为必填',trigger:'blur'}],
                image:[{required:true,message:'必须上传主图片',trigger:'blur'}],
                category:[{required:true,message:'请选择商品属性'}],
                thinkmoney:[{required:true,message:'请输入现价',trigger:'blur'}],
                orimoney:[{required:true,message:'请输入原价',trigger:'blur'}],
                common:[{required:true,message:'请选择类别',trigger:'blur'}]
            },
            options: [{ //商品类别
                value: '电子数码',
                label: '电子数码'
            }, {
                value: '图书',
                label: '图书'
            }, {
                value: '旅游',
                label: '旅游'
            }, {
                value: '生活',
                label: '生活'
            },{
                value: '服装',
                label: '服装'
            },{
                value: '化妆',
                label: '化妆'
            },{
                value: '其他',
                label: '其他'
            }
            ]
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.findPage();
        },

        methods: {
            //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
            handleAvatarSuccess(response,file) {
                this.imageUrl="http://qsazz6un4.hd-bkt.clouddn.com/"+response.data;
                this.$message({
                    type:response.flag ? 'success' : 'error',
                    message:response.message
                })
                //设置form表单中的img数据，为后来提交到数据库做准备
                this.editData.image = response.data;
            },
            //上传图片之前执行
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg'|| file.type === "image/png";
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传图片只能是JPG或者PNG格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //详情图上传之前的方法
            handlePreview(fileList){
                const sizeflag = Object.keys(fileList).length < 4;
                console.log(Object.keys(fileList).length);
                if(!sizeflag){
                    this.$message.error("最多上传3张图片");
                }
                return sizeflag;
            },
            //详情图上传成功
            handleListSuccess(response){
                this.$message({
                    type:response.flag ? 'success' : 'error',
                    message:response.message
                })
                //设置form表单中的imglist数据，为后来提交到数据库做准备
                console.log(response.data);
                this.imageList += (response.data + ",");
            },
            //上传图片超出的函数
            exceed(){
                this.$message.error("上传最多3张图片");
            },
            //删除图片的方法
            handleRemove(file){
                /*axios.post("/commodity/removeImage",file).then((res)=>{
                    if(res.data.flag){
                        //删除成功
                        this.$message.success("删除成功");
                    }else{
                        this.$message.error("删除失败");
                    }
                }).catch(()=>{
                    this.$message.error("删除失败");
                })*/
            },
            //分页查询
            findPage() {
                console.log(this.findstatus);
                //发送ajax请求，发送分页请求参数（每页条数，查询条件）
                var page ={
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryString: this.pagination.queryString
                };
                axios.post("/commodity/findallbyuserid?commstatus="+this.findstatus,page).then((res)=>{
                    //处理响应数据
                    this.pagination.total = res.data.total;
                    this.dataList = res.data.rows;
                })
            },
            //切换页码
            handleCurrentChange(currentPage) {
                //页面更改时，再次请求数据
                this.pagination.currentPage = currentPage;
                this.findPage();
            },
            quxiao(){
                this.$message.warning("已取消");
            },
            //已售出
            solded(row){
                this.$confirm("确认设置"+row.commname+"已售出吗?","提示",{type:'warning'}).then(()=> {
                    axios.post("/commodity/solded?commid=" + row.commid).then((res) => {
                        if (res.data.flag) {
                            this.$message.success(res.data.message);
                            this.findPage();
                        } else {
                            this.$message.error(res.data.message);
                        }
                    }).catch(() => {
                        this.$message.error("网络错误");
                    })
                }).catch(()=>{
                    this.$message.warning("已取消");
                })
            },
            //删除商品
            deletecomm(row){
                this.$confirm("确认删除"+row.commname+"吗?","删除",{type:'warning'}).then(()=>{
                    axios.post("/commodity/deletecomm?commid=" + row.commid).then((res)=>{
                        if(res.data.flag){
                            this.$message.success(res.data.message);
                            this.findPage();
                        }else{
                            this.$message.error(res.data.message);
                        }
                    })
                }).catch(()=>{
                    this.$message.warning("已取消");
                })
            },
            //编辑商品,弹出编辑框
            editcomm(row){
                this.dialogFormVisible4Edit = true;
                //回显数据
                axios.post("/commodity/findByCommid?commid=" + row.commid).then((res)=>{
                    if(res.data.flag){
                        this.editData = res.data.data.comm;
                        this.imageUrl = res.data.data.comm.image;
                    }else{
                        this.$message.error(res.data.message);
                    }
                }).catch(()=>{
                    this.$message.warning("已取消");
                })
            },
            //确定编辑商品
            handleEdit(){
                if(this.imageList !== "" && this.imageList !== null){
                    this.editData.imageList = this.imageList;
                }
                this.$refs['dataEditForm'].validate((valid)=>{
                    if(valid){
                        this.$confirm("确认保存"+this.editData.commname+"吗?","提示",{type:'warning'}).then(()=> {
                            axios.post("/commodity/updatecomm",this.editData).then((res)=>{
                                if(res.data.flag){
                                    this.dialogFormVisible4Edit=false;
                                    //重置表单
                                    this.resetForm();
                                    this.$message.success("修改成功");
                                    this.findPage();
                                }else{
                                    this.$message.warning("修改失败");
                                }
                            }).catch(()=>{
                                this.$message.warning("网络异常");
                            })
                        }).catch(()=>{
                            this.$message.warning("已取消");
                        })
                    }else{
                        this.$message.error("请正确输入信息");
                    }
                })

            },
            // 重置表单
            resetForm() {
                this.commdata = {};
                this.imageUrl = null;
                this.fileList = [];
                this.editData = {};
            },
            //查看详情
            xiangqing(row){
                window.open("/commodity/detail/"+row.commid,'_blank');
            }
        }
    })
</script>
</html>